import { IDomEditor, SlateElement } from "@wangeditor-next/editor";
import { DisabledElement } from "./DisabledModel";
import { h, VNode } from "snabbdom";

/**
 * 渲染新元素到编辑器
 * @param elem 附件元素，即上文的 disabledText
 * @param children 元素子节点，void 元素可忽略
 * @param editor 编辑器实例
 * @returns vnode 节点（通过 snabbdom.js 的 h 函数生成）
 */
function disabledRender(elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode {
  const { value } = elem as DisabledElement;
  // vnode
  const aVnode = h(
    "span",
    {
      props: {
        className: "disabled-text",
        contenteditable: false,
        // "data-w-e-type": "disabledText", // 用于识别元素类型
        // "data-value": value, // 存储值
      },
      // 阻止事件冒泡
      on: {
        // click: (e: Event) => {
        //   e.preventDefault();
        //   e.stopPropagation();
        // },
      },
    },
    `${value}`
  );

  return aVnode;
}

// 定义 renderElem 配置
const renderElemConf = {
  type: "disabledText", // 节点 type ，重要！！！
  renderElem: disabledRender,
};

export default renderElemConf;
